<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5电脑端微信聊天窗口界面 - 站长素材</title>

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
    <link rel="stylesheet" href="/static/index/css/reset.min.css">
    <link rel="stylesheet" href="/static/index/css/style.css">

</head>
<body>

<div class="wrapper">
    <div class="container">
        <div class="left">
            <div class="top">
                <input type="text" placeholder="Search" />
                <a href="javascript:;" class="search"></a>
            </div>
            <ul class="people">
                <li class="person" data-chat="person1">
                    <img src="/static/index/img/thomas.jpg" alt="" />
                    <span class="name">Thomas Bangalter</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">I was wondering...</span>
                </li>
                <li class="person" data-chat="person2">
                    <img src="/static/index/img/dog.png" alt="" />
                    <span class="name">Dog Woofson</span>
                    <span class="time">1:44 PM</span>
                    <span class="preview">I've forgotten how it felt before</span>
                </li>
                <li class="person" data-chat="person3">
                    <img src="/static/index/img/louis-ck.jpeg" alt="" />
                    <span class="name">Louis CK</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">But we’re probably gonna need a new carpet.</span>
                </li>
                <li class="person" data-chat="person4">
                    <img src="/static/index/img/bo-jackson.jpg" alt="" />
                    <span class="name">Bo Jackson</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">It’s not that bad...</span>
                </li>
                <li class="person" data-chat="person5">
                    <img src="/static/index/img/michael-jordan.jpg" alt="" />
                    <span class="name">Michael Jordan</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">Wasup for the third time like is
you blind bitch</span>
                </li>
                <li class="person" data-chat="person6">
                    <img src="/static/index/img/drake.jpg" alt="" />
                    <span class="name">Drake</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">howdoyoudoaspace</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top"><span>To: <span class="name">Dog Woofson</span></span></div>
            <div class="chat" data-chat="person1">
                <div class="conversation-start">
                    <span>Today, 6:48 AM</span>
                </div>
                <div class="bubble you">
                    Hello,
                </div>
                <div class="bubble you">
                    it's me.
                </div>
                <div class="bubble you">
                    I was wondering...
                </div>
            </div>
            <div class="chat" id="message" data-chat="person2">
                <div class="conversation-start">
                    <span>Today, 5:38 PM</span>
                </div>
                <div class="bubble you">
                    Hello, can you hear me?
                </div>
                <div class="bubble you">
                    I'm in California dreaming
                </div>
                <div class="bubble me">
                    ... about who we used to be.
                </div>
                <div class="bubble me">
                    Are you serious?
                </div>
                <div class="bubble you">
                    When we were younger and free...
                </div>
                <div class="bubble you">
                    I've forgotten how it felt before
                </div>
            </div>
            <div class="chat" data-chat="person3">
                <div class="conversation-start">
                    <span>Today, 3:38 AM</span>
                </div>
                <div class="bubble you">
                    Hey human!
                </div>
                <div class="bubble you">
                    Umm... Someone took a shit in the hallway.
                </div>
                <div class="bubble me">
                    ... what.
                </div>
                <div class="bubble me">
                    Are you serious?
                </div>
                <div class="bubble you">
                    I mean...
                </div>
                <div class="bubble you">
                    It’s not that bad...
                </div>
                <div class="bubble you">
                    But we’re probably gonna need a new carpet.
                </div>
            </div>
            <div class="chat" data-chat="person4">
                <div class="conversation-start">
                    <span>Yesterday, 4:20 PM</span>
                </div>
                <div class="bubble me">
                    Hey human!
                </div>
                <div class="bubble me">
                    Umm... Someone took a shit in the hallway.
                </div>
                <div class="bubble you">
                    ... what.
                </div>
                <div class="bubble you">
                    Are you serious?
                </div>
                <div class="bubble me">
                    I mean...
                </div>
                <div class="bubble me">
                    It’s not that bad...
                </div>
            </div>
            <div class="chat" data-chat="person5">
                <div class="conversation-start">
                    <span>Today, 6:28 AM</span>
                </div>
                <div class="bubble you">
                    Wasup
                </div>
                <div class="bubble you">
                    Wasup
                </div>
                <div class="bubble you">
                    Wasup for the third time like is <br />you blind bitch
                </div>

            </div>
            <div class="chat" data-chat="person6">
                <div class="conversation-start">
                    <span>Monday, 1:27 PM</span>
                </div>
                <div class="bubble you">
                    So, how's your new phone?
                </div>
                <div class="bubble you">
                    You finally have a smartphone :D
                </div>
                <div class="bubble me">
                    Drake?
                </div>
                <div class="bubble me">
                    Why aren't you answering?
                </div>
                <div class="bubble you">
                    howdoyoudoaspace
                </div>
            </div>
            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <input type="text" id="msg"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a href="javascript:;" class="write-link send" id="sendBtn"></a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/index/js/jquery-3.1.1.min.js"></script>
<script  src="/static/index/js/index.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script>
    $(function () {
        var uid = 1;//当前用户id
        var token = 'abcdefg';//用户token

        //判断浏览器是否支持WebSocket
        var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
        if (supportsWebSockets) {
            //建立WebSocket连接（ip地址换成自己主机ip）
            var ws = new WebSocket("ws://192.168.217.130:9508?uid="+uid+"&token="+token);
            ws.onopen = function () {
                layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600});
            };
            ws.onerror = function () {
                layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600});
            };
            ws.onmessage = function (evt) {
                var data = $.parseJSON(evt.data);
                //错误提示
                if(data.status != 1){
                    layer.alert(data.message,{icon:2});
                    return;
                }
                //消息返回
                if (data.status==1 && data.data.message!='') {
                    var html = "";
                    if (data.data.uid == uid) {
                        html += "<div class=\"bubble me\">"+data.data.message+"</div>";
                    }else{
                        html += "<div class=\"bubble you\">"+data.data.message+"</div>";
                    }
                }
                $("#message").append(html);
                setTimeout(function () {
                    ($('#message').children("div:last-child")[0]).scrollIntoView();//向上滚动
                },100);
            };
            ws.onclose = function (res) {

            };
            //按钮发送
            $("#sendBtn").click(function () {
                var contents = $("#msg").val().trim();
                if(contents == null || contents == ""){
                    alert('不能为空！');
                    return false;
                }else{
                    ws.send(contents);
                    $("#msg").val("");
                }
            });
            //回车发送
            $("#msg").keydown(function (evel) {
                var that = $(this);
                if (evel.keyCode == 13) {
                    evel.cancelBubble = true;
                    evel.preventDefault();
                    evel.stopPropagation();
                    var contents = that.val().trim();
                    if(contents == null || contents == ""){
                        layer.msg('内容为空',{shade:0.1,icon:2,time:600});
                        return false;
                    }else{
                        ws.send(contents);
                        that.val("");
                    }
                }
            });
        }else{
            layer.alert("您的浏览器不支持 WebSocket!");
        }
    });

</script>

<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>